<template>

  <!--调用说明----- 选择图标icon及颜色
   调用方法：
     调用方法：
    <SelectIcon title="费用类型" :value="form1" icongroup="0" @selecticon="selectedIcon" />
    <script>
      import SelectIcon from '@/views/common/selecticon'
      export default {
        components: {SelectIcon }
      }
    </script>

    title:input的label,
    :value: 传入的值
    :onlycolor: 仅显示颜色选择器。默认显示全部(false)
    :onlyicon:仅显示图标选择器,默认显示全部(false)
    icongroup:需要调取的图标组，0，主要用于费用类型，1，实体相关，2，报表模板分类相关
    @selecticon：父组件取值方法（  name：input输入值，icon:选择的图标，color：选择的颜色）

   -->

  <div>
    <el-form-item v-if=" !onlycolor && !onlyicon" :label="title" prop="IconInputName">
      <el-input v-model="value.IconInputName" :placeholder="'请输入您要添加的'+title" @input="selectedIcon()">
        <i slot="prefix" class="iconfont a-icon " :class="value.Icon?value.Icon:iconList[icongroup][0]" :style="'color:'+value.Color" /></el-input>
    </el-form-item>
    <el-form-item v-if="!onlycolor" label="选择图标">
      <el-radio-group v-model="value.Icon">
        <el-radio v-for="item in iconList[icongroup]" :key="item" style="margin-right:0" class="select-icon-color padding-top-sm" :label="item" @change="selectedIcon()">
          <i :class="'iconfont a-icon '+item" :style="item==value.Icon?'color:'+value.Color:'color:#aaa'" />
        </el-radio>

      </el-radio-group>

    </el-form-item>
    <el-form-item v-if="!onlyicon" label="选择颜色">
      <el-radio-group v-model="value.Color">
        <el-radio v-for="item in predefineColors" :key="item" style="margin-right:0" class="select-icon-color  padding-top-sm" :label="item" @change="selectedIcon()">
          <span class="color-span">
            <i :style="'background-color:'+item" />
          </span>
        </el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item v-if="!onlyicon" v-model="value.Color" label="定义颜色">
      <el-color-picker
        v-model="value.Color"
        :predefine="predefineColors"
        size="small"
      />
    </el-form-item>
  <!-- </el-form> -->
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Object,
      default: function() {
        return {
          IconInputName: '',
          Color: '#f9a825',
          Icon: 'icon-qizhi'
        }
      }
    },
    title: {
      type: String,
      default: '费用类型'
    },
    icongroup: {
      type: String,
      default: 'feeTypeIcon'
    },
    onlycolor: {
      type: Boolean,
      default: false
    },
    onlyicon: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      form: {

      },

      // 颜色选择器
      predefineColors: [

        '#f9a825', '#ff6f00', '#ef9a9a', '#ef5350', '#e53935', '#c62828', '#f48fb1', '#ec407a', '#d81b60', '#ad1457',
        '#b39ddb', '#7e57c2', '#5e35b1', '#4527a0', '#90caf9', '#42a5f5', '#1e88e5', '#1565c0', '#80deea', '#26c6da',
        '#00acc1', '#00838f', '#a5d6a7', '#66bb6a', '#43a047', '#2e7d32', '#dce775', '#cddc39', '#afb42b', '#827717',
        '#8d6e63', '#6d4c41', '#4e342e', '#b0bec5', '#78909c', '#657083', '#546e7a', '#37474f', '#333333'
      ],
      iconList: [
        // 主要用于费用类型
        [
          'icon-travel', 'icon-qicheyongpin', 'icon-huochepiao', 'icon-lunchuan', 'icon-tingchefei', 'icon-guolufei',
          'icon-kuaidiwuliu', 'icon-ziyuan1', 'icon-tree-round-train', 'icon-jiayou', 'icon-gongwenbao', 'icon-canyinzhekou',
          'icon-xiuliweihu', 'icon-gouwuche', 'icon-Coffee', 'icon-shoujijiaofei', 'icon-qiye', 'icon-Printing',
          'icon-fangxing', 'icon-book', 'icon-dianhua1', 'icon-quality', 'icon-prize', 'icon-shuidianmei2', 'icon-riyongpin',
          'icon-yiliaojiankang', 'icon-tijian', 'icon-tree-round-tax', 'icon-kuaidixiaoge-hui', 'icon-shoufukuanheshouxufeipingzheng', 'icon-lingdai',
          'icon-peixun', 'icon-xitongxiaoxi', 'icon-xiaoyou', 'icon-Processmanagement', 'icon-menu', 'icon-mail', 'icon-bill', 'icon-peixun3', 'icon-huo',
          'icon-zhengfu', 'icon-falv ', 'icon-02-15ysjd', 'icon-diannao1', 'icon-dianli', 'icon-position',
          'icon-Collection', 'icon-qizhi'
        ],
        // 主要用于实体
        [
          'icon-framework', 'icon-stock', 'icon-qunfengzhuye', 'icon-qiye', 'icon-xuesheng', 'icon-jiaoyi', 'icon-yinxing', 'icon-peixun2',
          'icon-icon1', 'icon-wenhuatiyu', 'icon-wenhuachuancheng', 'icon-ding', 'icon-xuexiao', 'icon-huo', 'icon-qizhi', 'icon-peixun3',
          'icon-icon-shangchangrukou', 'icon-zhengfu', 'icon-tuanti', 'icon-gongsi', 'icon-falv', 'icon-yiyuan2',
          'icon-02-15ysjd', 'icon-dianlishebei', 'icon-peixun4', 'icon-licaizigongsi', 'icon-bangong', 'icon-xuexiao1',
          'icon-zhengfuwangzhan', 'icon-diannao1', 'icon-gongsi1', 'icon-dianli', 'icon-daping-qihouzhiliang', 'icon-remen', 'icon-yiyuan'
        ],
        // 用于模板
        [
          'icon-shen2', 'icon-bao1', 'icon-gong1', 'icon-jie', 'icon-shen1', 'icon-bao', 'icon-gong', 'icon-wodejiekuan',
          'icon-shenqingtuikuan', 'icon-Approval', 'icon-Recharge', 'icon-data', 'icon-addto', 'icon-icon-shangchangrukou',
          'icon-dianli', 'icon-daping-qihouzhiliang', 'icon-gongcheng', 'icon-qizhi', 'icon-huo', 'icon-guizeguanli', 'icon-zanwuweituofangyuan', 'icon-chepiao',
          'icon-zhengjianshensu', 'icon-edit', 'icon-project', 'icon-task1', 'icon-mail', 'icon-Collection', 'icon-inspect', 'icon-prize',
          'icon-tasklist', 'icon-Basicsettings', 'icon-qianbi1', 'icon-jilu2', 'icon-qianmoney125'
        ]

      ] // 图标选择器
    }
  },
  methods: {
    selectedIcon: function() {
      this.$emit('selecticon', this.value)
    }
  }
}
</script>

<style lang="scss" scoped>
.select-icon-color ::v-deep.el-radio__inner{
  display:none!important
}

.select-icon-color ::v-deep.el-radio__input.is-checked+.el-radio__label span {

    border: 1px solid #409EFF;

}
.color-span{
  display:inline-block;width:30px;height:30px;border-radius:3px;

  i{
 display:block;width:20px;height:20px;margin:4px;border-radius: 3px;
  }
}
</style>
